<template>
	<div>
		<el-card style="text-align: center;">
			<div>
				<h2>{{brandData.brand.name}}</h2>
			</div>
			<div>
				<img :src="brandData.brand.pic_url">
			</div>
		</el-card>

		<el-card style="margin-top: 20px;text-align: center;">
			<div slot="header" >
				<h4>全部商品</h4>
			</div>
			<div>
				<div class="prod-b" v-for="god in brandData.goods" :key="god.id">
					<router-link :to="{path: '/productdetail', query: {id:god.id}}" class="prod-b-a">
						<div class="prod-b-border">
							<div style="height:240px;">
								<img :src="god.list_pic_url" style="width: 100%;height: 240px;" />
							</div>
							<div class="prod-b-title">{{god.name}}</div>
							<div class="prod-b-brief">{{god.goods_brief}}</div>
						</div>
					</router-link>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				brandData: {brand:{},goods:[]}
			};
		},
		mounted() {
			this.id = this.$route.query.id; //获取上个页面传递的id,在下面获取数据的时候先提交id
			this.initBrand(this.id);
		},
		methods: {
			initBrand(id) {
				let _this = this;
				var params = new URLSearchParams();
				params.append('id', id);
				_this.$axios.post(_this.$api.BrandDetailForGoods, params).then(function(response) {
						_this.brandData = response.data.data
						console.log(response)
					})
					.catch(function(error) {
						console.log(error)
					});
			}
		}
	}
</script>

<style>
	.prod-b {
		display: flex;
		width: 33%;
		float: left;
	}
	.prod-b-a {
		width: 100%;padding: 15px 10px;
	}

	.prod-b-border {
		border: #999999 1px solid;
		height: 280px;
	}

	.prod-b-title {
		color: #909399;
		font-size:16px;
		font-weight: bold;
	}

	.prod-b-brief {
		color: #909399;
		font-size:11px;
	}
</style>
